<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物资入库记录</title>
    <link rel="stylesheet" href="/css/elementui/index.css">
    <link rel="stylesheet" href="/css/exam/css/style.css">
    <link rel="stylesheet" href="/iconfont/iconfont.css">
    <script src="/css/exam/js/httpVueLoader.js"></script>
</head>
<body>
<div id="app">
  <!--导航切换-->

  <div class="p-30">
    <el-row type="flex" class="row-bg">
       <el-form :inline="true" :model="formInline" ref="formInline" label-width="100px" class="demo-ruleForm" >
            <el-form-item label="" prop="name">
                <el-input v-model="formInline.name" placeholder="请输入物资名称" style="width:150px"></el-input>
            </el-form-item>
            <el-form-item label=""  prop="goods_id">
			<el-cascader
			    class="w-400px"
			    :clearable="true"
			    :options="goodsdata"
			    :props="props"
			    v-model="formInline.goods_id"
				placeholder="请选择分类名称"
				clearable
				 ref='postSelectRef' 
				 @change='postValueChange($event)'
			></el-cascader>
			</el-form-item>
			<el-form-item  label=""  prop="warehouse_type">
            <el-select v-model="formInline.warehouse_type" placeholder="请选择入库类型"  style="width:150px">
                <el-option v-for="(value, key, index) in get_warehouse_type" :key="index" :label="value" :value="key">
                </el-option>
            </el-select>  
            </el-form-item>
			<el-form-item  label=""  prop="">
				<div class="block">
					<span class="demonstration"></span>
					<el-date-picker
					  v-model="formInline.daytime"
					  type="daterange"
					  value-format="yyyy-MM-dd"
					  range-separator="至"
					  start-placeholder="开始日期"
					  end-placeholder="结束日期"  style="width:250px">
					</el-date-picker>
				  </div>
            </el-form-item>
            <el-form-item style="margin-right:20px;">
                <el-button type="primary" size="medium"  @click="searchput('formInline')">搜&ensp;&ensp;索</el-button>
			    <el-button size="medium" @click="resetForm('formInline')">重&ensp;&ensp;置</el-button>
			</el-form-item>
				<el-form-item>
				<el-button-group style="margin-top: -5px;">
				  <el-button type="primary" size="medium"><a href="{{route('admin.warehouse.referweb')}}" style="display:block;color:#fff;text-decoration:none">新增入库</a></el-button>
				  <el-button type="primary" size="medium"><a href="{{route('admin.warehouse.returnIn')}}" style="display:block;color:#fff;text-decoration:none">归还入库</a></el-button>
				</el-button-group>
				<el-button type="primary" size="medium"><a href="{{route('admin.warehouse.outbound')}}" style="display:block;color:#fff;text-decoration:none">出&ensp;&ensp;库</a></el-button>
				<el-button type="primary" size="medium" @click="downloadExcel()"><span style="display:block;color:#fff;text-decoration:none"><i class="el-icon-download"></i>导&ensp;&ensp;出</a></el-button>
			</el-form-item>
		</el-form>
    </el-row>

    <template>
        <el-table  :data="list"  border  style="width: 100%" v-loading="loading" :default-sort="{ prop: 'created_at', order: 'descending' }">  
            <el-table-column prop="order" label="入库单号" width="130"> </el-table-column>
            <el-table-column prop="created_at" label="入库时间" sortable width="160"> </el-table-column>

			<el-table-column label="物资名称" sortable  width="160">
				<template slot-scope="scope">
				    <div v-for="(val,index) in scope.row.warehouse_materials" :key="index"  class="bline">
						<span v-if="val.material_id==item.id" v-for="item in materialList" :key="item.id">
						 @{{item.name}}
						</span>     
					</div>
				</template>
			</el-table-column>
			<el-table-column label="物资分类" sortable  width="160">
				<template slot-scope="scope">
				    <div v-for="(val,index) in scope.row.warehouse_materials" :key="index"  class="bline">
					<span v-if="val.goods_id==item.id" v-for="item in goodsFlat" :key="item.id">
					 @{{item.name}}
					</span> 
					</div>
				</template>
			</el-table-column>
			<el-table-column label="所属单位（人）" sortable  width="160">
				<template slot-scope="scope">
				    <div v-for="(val,index) in scope.row.warehouse_materials" :key="index"  class="bline">
						<span v-if="val.checkcategory_id==item.id" v-for="item in checkcategory" :key="item.id">
						 @{{item.name}}
						</span> 
					</div>
				</template>
			</el-table-column>
			<el-table-column label="入库数量" sortable  width="160">
				<template slot-scope="scope">
				    <div v-for="(val,index) in scope.row.warehouse_materials" :key="index"  class="bline">
				      @{{val.number}}
					</div>
				</template>
			</el-table-column>
			<el-table-column label="入库类别" sortable  width="160">
				<template slot-scope="scope">
				    <div v-for="(val,index) in scope.row.warehouse_materials" :key="index"  class="bline">
				     <span v-if="val.warehouse_type == 1">新增入库</span>
				     <span v-if="val.warehouse_type == 2">盘点入库</span>
				     <span v-if="val.warehouse_type == 3">归还入库</span>
					</div>
				</template>
			</el-table-column>
            <!--
            <el-table-column v-for="(item, index) in columnList" :key="index" :label="item"> 
               <template slot-scope="scope">
                <div v-for="(val,index2) in scope.row.warehouse_materials" :key="index2"  class="bline">
                  <div v-if="item=='物资名称'"></div>
                  <div v-if="item=='物资分类'"></div>
                  <div v-if="item=='所属单位（人）'"></div>
                  <div v-if="item=='入库数量'"></div>
                  <div v-if="item=='入库类别'"></div>
                </div>
               </template>-->
            </el-table-column>
            
			<el-table-column prop="users.name" label="提交人" width=""> </el-table-column>
            <el-table-column fixed="right"  label="操&ensp;&ensp;作"  width="250">
              <template slot-scope="scope">
			      <el-button  size="mini"  type="primary" ><a style="color:#fff" @click="gotoedit(scope.$index, scope.row)">修&ensp;&ensp;改</a></el-button>
                  <el-button  size="mini"  type="primary" @click.native.prevent="getorderdata(scope.$index, scope.row)" >入库单</el-button>
                  <el-button  size="mini"  type="danger" @click.native.prevent="deleteRow(scope.$index, scope.row)" >删&ensp;&ensp;除</el-button>
                        <!--入库单弹窗-->
                      <el-dialog
                        :title="title"
                        :visible.sync="dialogFormVisible"
                        width="80%"
                        :append-to-body="true"
                        >
                        <el-row type="flex" class="row-bg" justify="space-between">
                            <h3>北宅街道应急物资入库单</h3>
                            <el-row>
                            <el-button type="primary" @click="downloadExcel2()"><span style="display:block;color:#fff;text-decoration:none">导&ensp;&ensp;出</a></el-button>
                            </el-row>
                        </el-row><br>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablestyle">
                          <tr class="trstyle">
                            <td><b>入库时间</b></td>
                            <td>@{{listone.created_at}}</td>
                            <td><b>入库类别</b></td>
                            <td>
							<span v-if="listone.warehouse_type == 1">新增入库</span>
							<span v-if="listone.warehouse_type == 2">盘点入库</span>
							<span v-if="listone.warehouse_type == 3">归还入库</span>
							</td>
                            <td><b>经手人</b></td>
                            <td>@{{listone.applicant}}</td>
                            <td><b>入库单号</b></td>
                            <td>@{{listone.order}}</td>
                          </tr>
                          <tr>
                            <td colspan="8">
                              <h3 style="margin:10px 0;text-align:center;line-height:60px">物资明细</h3>
                              <el-table  :data="warehouse_materials_one"  border  style="width: 100%">   
                                    <el-table-column prop="goods.name" label="类&ensp;&ensp;别" sortable  width=""> </el-table-column>
                                    <el-table-column prop="id" label="序&ensp;&ensp;号"  width="80"> </el-table-column>
                                    <el-table-column prop="material_list.name" label="物资名称" width=""> </el-table-column>
                                    <el-table-column prop="number" label="数&ensp;&ensp;量"  width="80"> </el-table-column>
                                    <el-table-column prop="unit" label="单&ensp;&ensp;位"  width=""> </el-table-column>
                                    <el-table-column prop="norms" label="规&ensp;&ensp;格"  width=""> </el-table-column>
                                    <el-table-column prop="checkcategory.name" label="所属单位" width=""> </el-table-column>
                                    <el-table-column prop="company.comName" label="单位名称" > </el-table-column>
                                    <el-table-column prop="seat" label="具体位置" > </el-table-column>
                                    <el-table-column prop="remarks" label="备&ensp;&ensp;注" width=""> </el-table-column>
                              </el-table> 
                              <br><br><br>
                            </td>
                          </tr>
                          <tr class="trstyle trstyle2">
                          <td>经办人签字</td>
                          <td colspan="3" class="tbimg"><img :src="listone.applicant_sign"></td>
                          <td>领导签字</td>
                          <td colspan="3">&nbsp;</td>
                        </tr>
                        </table>                     
                      </el-dialog>
              </template>
            </el-table-column>
        </el-table><br>
        <!-- 分页组件 -->
        <div class="block" style="margin-top:15px;">
            <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" 
            :current-page="currentPage" 
            :page-sizes="[10,20,50,100]" 
            :page-size="pageSize" 
            layout="total, sizes, prev, pager, next, jumper" 
            :total="count">
            </el-pagination>
        </div>
       
    </template>


  </div>

</div>

<script src="/css/exam/js/vue.js"></script>
<script src="/css/elementui/index.js"></script>
<script src="/css/exam/js/axios.min.js"></script>
<script>

const app = new Vue({
  el: '#app',
  data() {
    return { 
      loading: false,
      list: [], //数据
      columnList: [
        '物资名称',
        "物资分类",
        "所属单位（人）",
        "入库数量",
        "入库类别",
      ],
      warehouse_materials:[],
      get_warehouse_type:'',//入库类型
      goodsdata:[],//物资分类数据
      materialList:[],
	  checkcategory:[],
	  
      listone:[],
      warehouse_materials_one:[],

      currentPage: 1, // 当前页码
      count: 0, // 总条数
      pageSize: 10,// 每页的数据条数
      formInline:{
        name:null,
        goods_id:null,
        warehouse_type:null,
		daytime:'',
        start_created_at:null,
        end_created_at:null,
      },

      url:'',
      file_name:'',
      printurl:'',

      title:'',
      dialogFormVisible:false,
      
      oneid:'',
	  
	  props: {
	    value: 'id',
	    label: 'name',
	    children: 'children',
	    checkStrictly: true,
	  },
      CascaderLabel:'',	  
      CascaderId:'',
	  
	  goodsFlat:[],
	  result:[],
      rules: {
          name: [
            { required: true, message: '请输入分类名称', trigger: 'blur' },
            { min: 4, max: 60, message: '长度在 4 到 60 个字符', trigger: 'blur' }
          ],
        },
    }
  },
  created() {
    this.getdata(),
    this.getgoodsdata()
	this.get()

  },

  methods: {
         // 删除列表行
          deleteRow(index, rows) { 
                this.$confirm('确定要删除吗?', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                   
                })
                .then(() => {                  
                  axios.post('/admin/warehouseMaterials/material_del',{id:rows.id})
                    .then(response =>{
                      this.getdata()                      
                    }).catch(error =>{
                        console.log('请求失败：' + error);
                    })
                })
          },

          //获取物资入库记录列表
          getdata() {    
            this.loading = true  
            let vm = this 
			var times = vm.formInline.daytime
			var timestring = times.toString()
			var start_created_at = timestring.split(',')[0]
			var end_created_at = timestring.split(',')[1]
			let pagram = {
				name:vm.formInline.name,
				goods_id:vm.CascaderId,
				warehouse_type:vm.formInline.warehouse_type,
				start_created_at:start_created_at,
				end_created_at:end_created_at,
				limit:vm.pageSize,
				page: vm.currentPage,
			}
            axios.post('/admin/warehouseMaterials/warehouseOrderListData',pagram)
            .then(response =>{
                vm.list = response.data.data.list;
                vm.warehouse_materials = response.data.data.list.warehouse_materials;
                vm.count = response.data.data.count; 
                vm.get_warehouse_type = response.data.data.get_warehouse_type; 
                vm.loading = false; 
            }).catch(error =>{
                console.log('请求失败：' + error);
                vm.loading = false; 
            })
          }, 
    //         //获取物资分类
		  // getgoodsdata() {  
		  //     let vm = this   
		  //     axios.post('/admin/goods/goods_all')
		  //     .then(response =>{
		  //         vm.goodsdata = response.data.data;
				//   console.log(vm.goodsdata,'---');
		  //     }).catch(error =>{
		  //         console.log('请求失败：' + error);
		  //     })
		  // }, 
		  //获取物资分类
		  getgoodsdata() {  
		      let vm = this   
		      axios.post('/admin/goods/goods_all')
		      .then(response =>{
		          vm.goodsdata = response.data.data;
		  		 console.log(vm.goodsdata,'goodsdata');
		  		 vm.goodsFlat = this.flattenArray(vm.goodsdata) //扁平获取物资id和name
		  		 console.log(vm.goodsFlat,'flat');
		      }).catch(error =>{
		          console.log('请求失败：' + error);
		      })
		  },
		  flattenArray(arr) { 
		    for (let i = 0; i < arr.length; i++) {
		      let obj=arr[i]
		  	let obj2={}
		  	obj2["id"]=obj.id
		  	obj2["name"]=obj.name
		  	this.result.push(obj2)
		  	if (Array.isArray(obj.children) && obj.children) {
		  		this.flattenArray(obj.children)
		  	}else{
		  		return
		  	}
		    }
		   return this.result;
		  },
           //获取物资入库单
           getorderdata(index, rows) {    
			console.log(rows);                       
            this.dialogFormVisible = true 
            this.loading = true  
            let id=rows.id
            this.oneid=id
            console.log('wo',this.oneid);
            axios.post('/admin/warehouseMaterials/warehouseOrderData',{id:id})
            .then(response =>{
                this.listone = response.data.data.warehouseOrder;
                this.warehouse_materials_one = response.data.data.warehouseOrder.warehouse_materials;
                this.loading = false; 
            }).catch(error =>{
                console.log('请求失败：' + error);
                this.loading = false; 
            })
          },
		  //获取id与名字对应
		  get(){
		    axios.post('/admin/warehouseMaterials/referweb')
		    .then(res => {
		    if (res.data.code == 200) {  
		        this.materialList = res.data.data.materialList
		        this.get_warehouse_type = res.data.data.get_warehouse_type
		        this.checkcategory = res.data.data.checkcategory
		    } 
		    })
		  },
          // 搜索事件         
          searchput(){
            this.currentPage = 1;
            this.getdata() 
          }, 
          resetForm(formName) {
            this.$refs[formName].resetFields();
            this.getdata() 
          },
          // 分页页码  
          handleSizeChange(val){
            console.log(`每页 ${val} 条`);
			this.currentPage = 1;
			this.pageSize = val;
            this.getdata()
          },
          handleCurrentChange(val){
            console.log(`当前页: ${val}`);
			this.currentPage = val;
            this.getdata()
					  
          },

          //导出文件
          downloadExcel() {
            let vm = this
            axios.post('/admin/warehouseMaterials/warehouseOrderExportone',{
              name:vm.formInline.name,
              goods_id:vm.CascaderId,
              warehouse_type:vm.formInline.warehouse_type,
              start_created_at:vm.formInline.start_created_at,
              end_created_at:vm.formInline.end_created_at
            })
                .then((res) => {
                  let url = res.data.url
                  let file_name = res.data.file_name
                  let link = document.createElement("a");
                  link.style.display = "none";
                  link.href = url;
                  link.setAttribute = file_name;
                  document.body.appendChild(link);
                  link.click();
                  document.body.removeChild(link)
                })
                .catch((err) => {
                  console.log(err);
                });
            },
          downloadExcel2() {
            let id = this.oneid;
            axios.post('/admin/warehouseMaterials/storage_import',{id:id})
                .then((res) => {
				  if(res.data.code == 408){
					  this.$message.error(res.data.message)
				  }
                  let url = res.data.data
                  let file_name = res.data.data.slice('-19')
                  console.log('file_name',file_name);
                  let link = document.createElement("a");
                  link.style.display = "none";
                  link.href = url;
                  link.setAttribute = file_name;
                  document.body.appendChild(link);
                  link.click();
                  document.body.removeChild(link)
                })
                .catch((err) => {
                  console.log(err);
                });
            },
			// 判断物资是否出库
			 gotoedit(index,row) {			
			      let edit_id = row.id
			      axios.post('/admin/warehouseMaterials/referweb',{id:edit_id})
						.then(res =>{
								if(res.data.code == 408){
									this.$message.error("该物资已出库，不能修改！")
								}else{	
									let url =  `/admin/warehouse/editReferweb?id=${row.id}&warehouse_type=${row.warehouse_type}`
									window.location.href = url
								}
						    
						}).catch(error =>{
						    console.log('请求失败：' + error);	
								this.loading = false; 
						})
			
			},
			postValueChange(value) {
				if(this.$refs["postSelectRef"].getCheckedNodes()[0]){
					let pathid = this.$refs["postSelectRef"].getCheckedNodes()[0].uid
					this.CascaderId = pathid + 1
					let pathlabel = this.$refs["postSelectRef"].getCheckedNodes()[0].pathLabels
					console.log(pathlabel,'eeeeee');
					this.CascaderLabel = pathlabel[pathlabel.length - 1]
				}			  
			},
    },

  })

</script>
<style scoped>
  .bline{border-bottom:1px solid #EBEEF5}
  .bline:last-child{border-bottom:0 solid #EBEEF5}
  .tablestyle{border:1px solid  #EBEEF5;}
  .trstyle td{border:1px solid  #EBEEF5;}
  .trstyle td{line-height:30px;padding:10px}
  .trstyle2 td{line-height:60px;}
  a{color:#409EFF;text-decoration: none;}
  .trstyle2 .tbimg{line-height: 16px;}
  .tbimg img{max-height:90px;line-height: 16px;}
  .el-button--medium {padding: 10px 10px;}
</style>
</body>
</html>